<!--
 * @Author: caiwq caiwq@putron.com
 * @Date: 2022-07-29 10:50:03
 * @LastEditors: caiwq caiwq@putron.com
 * @LastEditTime: 2022-08-19 13:54:15
 * @FilePath: \LMX\src\views\Layout.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="cont">
        <div id="nav">
            <router-link tag="div" @click.native="choose('scene')" class="link"
                :class="[active == 'scene' ? 'active_link' : '']" to="/scene">场景</router-link>
            <router-link tag="div" @click.native="choose('qiehuan')" class="link"
                :class="[active == 'qiehuan' ? 'active_link' : '']" to="/qiehuan">切换</router-link>
            <router-link tag="div" @click.native="choose('setting')" class="link"
                :class="[active == 'setting' ? 'active_link' : '']" to="/setting">设置</router-link>
        </div>
        <router-view class="content_layout"></router-view>
    </div>
</template>


<script>
export default {
    data() {
        return {
            active: 'qiehuan'
        }
    },
    mounted() {
        //获取当前窗口的路径
        let pathname = window.location.hash;
        this.active = pathname.substring(2);
    },
    methods: {
        choose(item) {
            this.active = item;
        }
    }

}
</script>

<style scoped lang="scss">
.cont {
    background: #13037d;
}

#nav {
    box-sizing: border-box;
    display: flex;
    position: sticky;
    top: 0;
    left: 0;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background: linear-gradient(0deg, #0308d3, #75b3ff) !important;
    border-bottom: solid #fff 2px;

    .link {
        width: 200px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .active_link {
        box-sizing: border-box;
        color: #00ffff;
        // border-bottom: solid 2px #00ffff;
    }
}

.content_layout {
    height: calc(100vh - 40px);
    color: #fff;
}
</style>